﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>WebGIS</title>
    <link rel="stylesheet" type="text/css" href="OpenLayers/theme/default/style.css" />	
    <script type="text/javascript" src="OpenLayers/OpenLayers.js" charset='utf-8'></script>
	<script type="text/javascript" src="js/Openlayers-Extends.js" charset='utf-8'></script>
	<style type="text/css">
		.olControlScaleLine {left: 200px !important;  bottom: 0px !important;}
		.olMapViewport{background-color: white !important;}
		.olLayerGoogleCopyright {display: none !important;}
		.olLayerGooglePoweredBy {display: none !important;}
		.smallmap {
			width: 800px;
			height: 600px;
			border: 1px solid #ccc;
		}
		.olControlNavToolbar div { 
		  display:block;
		  width:  28px;
		  height: 28px;
		  top:  0px;
		  left: 6px;
		  position: relative;
		}
	</style>	
    <script type="text/javascript">
        var map;
        var measureControls;
        var vectors;
		var markers;
		var textMarkers;
        var pgoogle = new OpenLayers.Projection("EPSG:4326");
        var pdis = new OpenLayers.Projection("EPSG:4326");
        var pointFeature;
        var popup;
        var wms;
        function init() {                       
			//定义地图对象//
			var mapOptions = {
				controls:[],
				projection: pgoogle,
				displayProjection: pdis, 
				units: "m",
				numZoomLevels: 9,
				resolutions:[6.87416779853693E-04*2,3.43708389926846E-04*2,1.71854194903937E-04*2,8.59270974757629E-05*2,4.29635487378815E-05*2,2.14817743689407E-05*2,1.07408871844704E-05*2,5.37044359342491E-06*2,2.68522179611759E-06*2],
				maxExtent: new OpenLayers.Bounds(-400,-400,400,400),
				restrictedExtent:new OpenLayers.Bounds(119.62907,29.87418,120.70556, 30.69908)
			};
			map = new OpenLayers.Map(
				'map', //定义显示地图的div
				mapOptions
			);			
			wms = new OpenLayers.Layer.TileCacheCustom("杭州地图",
		                ["tiles/L00",
                 		"tiles/L01",
                 		"tiles/L02",
                 		"tiles/L03",
                 		"tiles/L04",
                 		"tiles/L05",
                 		"tiles/L06",
                 		"tiles/L07","tiles/L08"
                 		],
                		"basic",
        	        	{
	                    		serverResolutions: [6.87416779853693E-04*2,3.43708389926846E-04*2,1.71854194903937E-04*2,8.59270974757629E-05*2,4.29635487378815E-05*2,2.14817743689407E-05*2,1.07408871844704E-05*2,5.37044359342491E-06*2,2.68522179611759E-06*2]
                		}
            		);
			map.addLayer(wms);
			//添加公交线路图层
			vectors = new OpenLayers.Layer.Vector("公交线路");
			map.addLayer(vectors);
			
			//添加公交站点图层
			//从文件中读取数据（坐标，标题和内容等），格式可查看markers-readme.txt
			markers = new OpenLayers.Layer.Text( "公交站点" ,{location: "markers.html",projection:"EPSG:4326"});
			map.addLayer(markers);						
			
			//添加地图所用控件//
			map.addControl(new OpenLayers.Control.PanZoomBar());			
			map.addControl(new OpenLayers.Control.KeyboardDefaults());
			map.addControl(new OpenLayers.Control.Navigation());
			map.addControl(new OpenLayers.Control.ScaleLine());
			//显示鼠标在地图中的经纬度到自定义的div中
			map.addControl(new OpenLayers.Control.MousePosition({'div': document.getElementById('coordinate')}));
			//注册事件，以获得当前鼠标在地图中的位置，并提供getPointLonLat功能
			map.events.register( 'mousemove',this , getPointLonLat);
			//显示（地图浏览相关）按钮至自定义的div中
			map.addControl(new OpenLayers.Control.NavToolbar({ 'div': document.getElementById('navtoolbar') }));
			
			//地图居中//
			map.setCenter(new OpenLayers.LonLat(120.168,30.288).transform(pdis,pgoogle),0);
			
			//添加测量距离和面积的控件//
			//定义测量时所用的点，线，面外观
			var sketchSymbolizers = {
				"Point": {
					pointRadius: 4,
					graphicName: "square",
					fillColor: "white",
					fillOpacity: 1,
					strokeWidth: 1,
					strokeOpacity: 1,
					strokeColor: "#333333"
				},
				"Line": {
					strokeWidth: 3,
					strokeOpacity: 1,
					strokeColor: "#666666",
					strokeDashstyle: "dash"
				},
					"Polygon": {
					strokeWidth: 2,
					strokeOpacity: 1,
					strokeColor: "#666666",
					fillColor: "white",
					fillOpacity: 0.3
				}
			};
			var style = new OpenLayers.Style();
			style.addRules([new OpenLayers.Rule({ symbolizer: sketchSymbolizers })]);
			var styleMap = new OpenLayers.StyleMap({ "default": style });
			//添加测量距离和面积的工具
			var control;
			measureControls = {
				line: new OpenLayers.Control.Measure(
					OpenLayers.Handler.Path, {
						persist: true,
						handlerOptions: {
							layerOptions: { styleMap: styleMap }
						}
					}
				),
				polygon: new OpenLayers.Control.Measure(
					OpenLayers.Handler.Polygon, {
						persist: true,
						handlerOptions: {
						layerOptions: { styleMap: styleMap }
						}
					}
				)
			};
            for (var key in measureControls) {
                control = measureControls[key];
                control.events.on({
                    "measure": handleMeasurements,
                    "measurepartial": handleMeasurements
                });
                map.addControl(control);
			}
		}
		function handleMeasurements(event) {
			//var geometry = event.geometry;
			var units = event.units;
			var order = event.order;
			var measure = event.measure;
			var element = document.getElementById('distance');//定义测量所得数据的输出位置
			var out = "";
			//定义测量所得数据的输出格式//
			if (order == 1) {
				out += "测量： " + measure.toFixed(3) + " " + units;
			} else {
				out += "测量：" + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
			}
			element.innerHTML = out;
		}
		//开始使用测量距离工具//
		function measureDistance() {
			measureControls["line"].activate();
		}
		//停止使用测量距离工具//
		function demeasureDistance() {
			measureControls["line"].deactivate();
		}
		//开始使用测量面积工具//
		function measurearea() {
			measureControls["polygon"].activate();
		}
		//停止使用测量面积工具//
		function demeasurearea() {
			measureControls["polygon"].deactivate();
		}
		//按所输点位置定位地图//
		function locateByLonLat() {
			//从相应位置获得所需定位的点的位置//			
			var lon = getLon("locatelon");
			if(!lon) return;
			var lat = getLat("locatelat");
			if(!lat) return;			
			//将地图按所获位置居中//
			map.setCenter(new OpenLayers.LonLat(lon, lat).transform(pdis, pgoogle));
		}
		
		//删除id='id'的公交路线
		function removeline() {
			var id = 'id';
			//查询id是否已存在
			for(var n = vectors.features.length; n>0;){
				n--;
				if(id==vectors.features[n].id) {vectors.removeFeatures(vectors.features[n]);return;}
			}
			alert('该id不存在，请重新输入id');
		}
		//在地图中依所输点画线,id='id'
		function addline(){
			//定义所需画的线，从外部读入(90 35,110 40, 120 30)。格式(点1，点2，点3...)
			//表示线的起点的经度为90，纬度为35，经过的点经度为110，纬度为40，而终点的经度为120，纬度为30
			drawbusline('id','120.158770000000 30.242317000000,120.158799000000 30.242998000000,120.158799000000 30.242998000000,120.159819000000 30.242981000000,120.160049000000 30.242999000000,120.160049000000 30.242999000000,120.160043000000 30.243525000000,120.160019000000 30.243894000000,120.159963000000 30.244783000000,120.159963000000 30.244783000000,120.159896000000 30.245822000000,120.159864000000 30.246628000000,120.159847000000 30.247016000000,120.159829000000 30.247422000000,120.159789000000 30.248303000000,120.159789000000 30.248303000000,120.159789000000 30.248303000000,120.159787000000 30.248411000000,120.159790000000 30.248649000000,120.159724000000 30.249650000000,120.159720000000 30.249959000000,120.159720000000 30.249959000000,120.159720000000 30.249959000000,120.159718000000 30.250067000000,120.159710000000 30.250616000000,120.159698000000 30.250914000000,120.159698000000 30.250945000000,120.159673000000 30.251489000000,120.159673000000 30.251489000000,120.159664000000 30.251690000000,120.159623000000 30.252605000000,120.159617000000 30.252738000000,120.159617000000 30.252738000000,120.159442000000 30.252732000000,120.159184000000 30.252724000000,120.159184000000 30.252724000000,120.158409000000 30.252700000000,120.158409000000 30.252700000000,120.158400000000 30.252819000000,120.158400000000 30.252819000000,120.158318000000 30.253977000000,120.158318000000 30.253977000000,120.158291000000 30.254156000000,120.158274000000 30.255100000000,120.158274000000 30.255100000000,120.158256000000 30.256298000000,120.158256000000 30.256298000000,120.158200000000 30.256964000000,120.158168000000 30.257835000000,120.158168000000 30.257835000000,120.158154000000 30.258158000000,120.158086000000 30.259002000000,120.157913000000 30.259307000000,120.157913000000 30.259307000000,120.157490000000 30.259936000000,120.157290000000 30.260230000000,120.156972000000 30.260623000000,120.156972000000 30.260623000000,120.156964000000 30.260633000000,120.156515000000 30.261140000000,120.156220000000 30.261535000000,120.155983000000 30.261732000000,120.155753000000 30.261991000000,120.155753000000 30.261991000000,120.155781000000 30.262471000000,120.155949000000 30.263062000000,120.156022000000 30.263305000000,120.156202000000 30.263731000000,120.156355000000 30.264088000000,120.156425000000 30.264416000000,120.156460000000 30.264627000000,120.156436000000 30.264823000000,120.156376000000 30.265410000000,120.156296000000 30.265834000000,120.156296000000 30.265834000000,120.155881000000 30.265772000000,120.154058000000 30.265526000000,120.153366000000 30.265428000000,120.152674000000 30.265330000000,120.152672000000 30.265330000000,120.152672000000 30.265330000000,120.152653000000 30.265391000000,120.152238000000 30.266740000000,120.152188000000 30.266958000000,120.152054000000 30.267472000000,120.151947000000 30.267823000000,120.151898000000 30.267984000000,120.151882000000 30.268037000000,120.151742000000 30.268473000000,120.151742000000 30.268473000000,120.151187000000 30.268352000000,120.150675000000 30.268238000000,120.149890000000 30.268016000000,120.149313000000 30.267853000000,120.148624000000 30.267654000000,120.147931000000 30.267459000000,120.147234000000 30.267024000000,120.146477000000 30.266457000000,120.145873000000 30.266020000000,120.145873000000 30.266020000000,120.145206000000 30.266514000000,120.144500000000 30.267097000000,120.144496000000 30.267100000000,120.144012000000 30.267472000000,120.143810000000 30.267646000000,120.143692000000 30.267744000000,120.143433000000 30.267996000000,120.143364000000 30.268064000000,120.143100000000 30.268410000000,120.142858000000 30.268928000000,120.142725000000 30.269244000000,120.142587000000 30.269642000000,120.142587000000 30.269642000000,120.142406000000 30.270162000000,120.142292000000 30.270474000000,120.142292000000 30.270474000000,120.142242000000 30.270611000000,120.141826000000 30.271714000000,120.141474000000 30.272675000000,120.140988000000 30.274037000000,120.140978000000 30.274256000000,120.140978000000 30.274256000000,120.140971000000 30.274412000000,120.140906000000 30.274912000000,120.140800000000 30.275207000000,120.140612000000 30.275514000000,120.140305000000 30.275899000000,120.139836000000 30.276463000000,120.139560000000 30.276785000000,120.139015000000 30.277431000000,120.138224000000 30.278439000000,120.137872000000 30.278797000000,120.137406000000 30.279187000000,120.136886000000 30.279572000000,120.136703000000 30.279739000000,120.136699000000 30.279743000000,120.136699000000 30.279743000000,120.136417000000 30.280000000000,120.136058000000 30.280397000000,120.135843000000 30.280695000000,120.135713000000 30.280973000000,120.135606000000 30.281371000000,120.135537000000 30.281709000000,120.135399000000 30.282403000000,120.135399000000 30.282595000000,120.135468000000 30.282874000000,120.135690000000 30.283304000000,120.135927000000 30.283669000000,120.136347000000 30.284403000000,120.136515000000 30.284833000000,120.136569000000 30.285191000000,120.136622000000 30.285509000000,120.136654000000 30.285644000000,120.136654000000 30.285645000000,120.136654000000 30.285645000000,120.134418000000 30.285523000000,120.130878000000 30.285331000000,120.130878000000 30.285331000000,120.129333000000 30.285249000000,120.128858000000 30.285252000000,120.126816000000 30.285128000000,120.124688000000 30.285031000000,120.124688000000 30.285031000000,120.124491000000 30.285022000000,120.118919000000 30.284743000000,120.118919000000 30.284743000000,120.114671000000 30.284460000000,120.114671000000 30.284460000000,120.114466000000 30.287143000000,120.114329000000 30.289760000000,120.114329000000 30.289760000000,120.110883000000 30.289590000000,120.110883000000 30.289590000000,120.109089000000 30.289503000000,120.109089000000 30.289503000000,120.102975000000 30.289207000000,120.102975000000 30.289207000000,120.102286000000 30.289174000000,120.098643000000 30.288936000000,120.098643000000 30.288936000000,120.093888000000 30.288775000000,120.093888000000 30.288775000000,120.087652000000 30.289088000000,120.087652000000 30.289088000000,120.085103048434 30.289138911693');			
		}
		//根据坐标画线//drawbusline('id','90 35,110 40, 120 30');
		function drawbusline(id, linestring){			
			var linewidth = document.getElementById('addlinewidth').value.trim() == "" ? 3 : document.getElementById('addlinewidth').value.trim();//定义线的粗细
			linewidth = parseFloat(linewidth);			
			if(isNaN(linewidth)||linewidth<0) {alert("请输入正确的粗细数值");return;}
			
			var linecolor = document.getElementById('addlinecolor').value.trim() == "" ? "#ee9900" : document.getElementById('addlinecolor').value.trim();//定义线的颜色
			//color未做判断
			
			var element = "LINESTRING(" + linestring + ")";
			var bounds;			
			var wktreader = new OpenLayers.Format.WKT(
				{
					'internalProjection': pgoogle,
					'externalProjection': pdis
				}
			);
			var features = wktreader.read(element);
			
			//从相应位置读取所需画的线的外观			
			var linestyle = {
				strokeColor: linecolor,
				strokeWidth: linewidth,
				strokeOpacity: 1,// 定义线的透明，值在0到1之间
				strokeLinecap: "round",//定义线末端的形状，选项有[butt | round | square]
				strokeDashstyle: "solid"//定义线的形状，选项有[dot | dash | dashdot | longdash | longdashdot | solid]
			};
			features.style = linestyle;
			if (features) {
				if (features.constructor != Array) {
					features = [features];
				}
				for (var i = 0; i < features.length; ++i) {
					features[i].id = id;
					if (!bounds) {
						bounds = features[i].geometry.getBounds();
					} else {
						bounds.extend(features[i].geometry.getBounds());
					}
	
				}
				vectors.addFeatures(features);
				map.zoomToExtent(bounds);
			} else {
				alert("输入错误");
			}
		}
		//在地图上添加标记//
		function addpoint() {
			//获得坐标//
			var lon = getLon("addpointlon");
			if(!lon) return;
			var lat = getLat("addpointlat");
			if(!lat) return;
			var id = document.getElementById("addpointid").value.trim();
			if(id=="") {alert('id不能为空');return;}
			for(var n = markers.markers.length; n>0;){
				n--;
				if(id==markers.features[n].id) {alert('该id已经存在，请重新输入id');return;}
			}
			var icon = document.getElementById('addpointmark').value.trim();
			icon = icon == "" ? "markers/marker-red.png" : icon;
			//icon需确认图标是否存在
			var title = document.getElementById('addpointinfotitle').value.trim();
			title = title == "" ? "title" : title;
			var description = document.getElementById('addpointinfocontent').value;
			description = description == "" ? "description" : description;
			var label = "<span style='color:blue;size:15px'>" + title + "</span>";
			markers.insertMarkersByParams(id,lon,lat,title,description,label,icon,'21,25');

			//显示标记在地图中心
			map.setCenter(new OpenLayers.LonLat(lon, lat).transform(pdis, pgoogle));
		}
		//删除地图上所有标记//
		function removemarkers() {
			//删除公交路线层中所有公交路线			
			vectors.removeFeatures(vectors.features);
			//删除公交站点层中所有公交站点	
			markers.clearFeatures();
	        	markers.clearMarkers();
	        	//删除地图上所有popup
	        	for(var i=map.popups.length - 1; i>=0; i--) {
		            map.removePopup(map.popups[i]);
		        };
		}
		//删除地图上id为'id'的公交站点//
		function removepoint() {
			var id = document.getElementById("removepointid").value.trim();
			if(id=="") {alert('id不能为空');return;}
			for(var n = markers.features.length; n>0;){
				n--;
				if(id==markers.features[n].id) {markers.removeMarkerById(id);return;}//重复判断了
			}
			alert('不存在该id，请重新输入id');			
		}
		
		//在地图上显示已有的标记//
		function showmarkers(){			
			markers.loadText();
		}		
		//在输入坐标上显示提示框//
		function showpopup() {
			//获得点坐标//
			var lon = document.getElementById('popuplon').value == "" ? 0 : document.getElementById('popuplon').value;
			var lat = document.getElementById('popuplat').value == "" ? 0 : document.getElementById('popuplat').value;
			var point = new OpenLayers.LonLat(lon, lat).transform(pdis, pgoogle);
			 var feature = new OpenLayers.Feature(markers, point); 
		            feature.closeBox = true;
		            feature.popupClass = AutoSizeFramedCloud;
		            feature.data['popupContentHTML'] = "<p>标题</p><BR>内容";
		            feature.data['overflow'] = "auto";
		                    var popup = feature.createPopup(feature.closeBox);
		                    for(var i=map.popups.length - 1; i>=0; i--) {
				            map.removePopup(map.popups[i]);
				        };
		                    map.addPopup(popup);
		                    popup.show();
			//显示提示框在地图中心
			map.setCenter(new OpenLayers.LonLat(lon, lat).transform(pdis, pgoogle));
		}
		//获得当前鼠标在地图中的经纬度		
		function getPointLonLat(position){
			var lonLat;
			if (position != null) {				
				lonLat = map.getLonLatFromPixel(position.xy);
				if (!lonLat) { 
					return;
				}    
				lonLat.transform(pgoogle,pdis);				
			}
			//lonLat.lon为当前鼠标的经度值，lonLat.lat为当前鼠标的纬度值
			return lonLat
		 }
		 //计算两点间距离
		 function calculateDistance(){
			var lon1 = getLon("caldisp1lon");
			if(!lon1) return;
			var lat1 = getLat("caldisp1lat");
			if(!lat1) return;
			var lon2 = getLon("caldisp2lon");
			if(!lon2) return;
			var lat2 = getLat("caldisp2lat");
			if(!lat2) return;
			var d = OpenLayers.Util.distVincenty(
	                    {lon: lon1, lat: lat1}, {lon: lon2, lat: lat2}
                	) * 1000;
			var out = "";
			out = "两点距离为："+d+"米";
			alert(out);
		 }
		 function getLon(divid){
			var lon = document.getElementById(divid).value;
			lon = parseFloat(lon);
			if(isNaN(lon)||lon<-180 || lon>180) {alert("请输入正确的经度");return null;}
			return lon;
		 }
		function getLat(divid){
			var lat = document.getElementById(divid).value;			
			lat = parseFloat(lat);			
			if(isNaN(lat)||lat<-90 || lat>90) {alert("请输入正确的纬度");return null;}
			return lat;
		 }
		 function movemap(direction){
			var slideFactor=50;
			switch (direction) {
				case "north": 
					map.pan(0, -slideFactor);
					break;
				case "south": 
					map.pan(0, slideFactor);
					break;
				case "west": 
					map.pan(-slideFactor, 0);
					break;
				case "east": 
					map.pan(slideFactor, 0);
					break;
			}
		 }
		 function movewest(){
			movemap('west');
		 }
		 function moveeast(){
			movemap('east');
		 }
		 function movenorth(){
			movemap('north');
		 }
		 function movesouth(){
			movemap('south');
		 }
    </script>
</head>
<body onload='init()' onunload="try{GUnload();}catch(e){}">
<table>
	<tr>
		<td width=800px>
		<!-- 控制地图的显示位置 -->
		<div id="map" class="smallmap"></div>
		</td>
		<td >
			鼠标在地图中的经纬度： <div id="coordinate"></div><br />
			<input id="Button51" type="button" onclick="movemap('east');" value="左移" />
			<input id="Button52" type="button" onclick="movemap('west');" value="右移" />
			<input id="Button53" type="button" onclick="movemap('south');" value="上移" />
			<input id="Button54" type="button" onclick="movemap('north');" value="下移" />
			<form>
				经度：<input id="locatelon" type="text" />
				<br />
				纬度：<input id="locatelat" type="text" />
				<br />
				<input id="Button0" type="button" onclick="locateByLonLat();" value="定位" />    
			</form>
			<input id="Button1" type="button" onclick="measureDistance();" value="测量距离" />
			<input id="Button2" type="button" onclick="demeasureDistance();" value="取消测量距离" />			
			<!-- 测量数据输出 -->
			<div id="distance"></div>
			<form>
				点1的经度：<input id="caldisp1lon" type="text" />
				<br />
				点1的维度：<input id="caldisp1lat" type="text" />
				<br />
				点2的经度：<input id="caldisp2lon" type="text" />
				<br />
				点2的维度：<input id="caldisp2lat" type="text" />
				<br />
				<input id="Button9" type="button" onclick="calculateDistance();" value="计算距离" />    				
				<!-- <input id="Button9" type="button" onclick="onPopupClose();" value="清除popup" /> -->    
			</form>    
				颜色：<input id="addlinecolor" type="text" />
				<br />
				粗细：<input id="addlinewidth" type="text" />
				<br />
				<input id="Button62" type="button" onclick="addline();" value="添加公交线路" />
				<input id="Button72" type="button" onclick="removeline();" value="删除公交路线" />
			</form>
			<form>
				显示站点的经度：<input id="addpointlon" type="text" />
				<br />
				显示站点的维度：<input id="addpointlat" type="text" />
				<br />
				Id：<input id="addpointid" type="text" />
				<br />
				图标地址：<input id="addpointmark" type="text" />
				<br />
				标题：<input id="addpointinfotitle" type="text" />
				<br />
				内容：<input id="addpointinfocontent" type="text" />
				<br />
				<input id="Button71" type="button" onclick="addpoint();" value="添加公交站点" />    								
				<input id="Button73" type="button" onclick="showmarkers();" value="显示已有公交站点" />
				<br />
				Id：<input id="removepointid" type="text" />
				<br />
				<input id="Button71" type="button" onclick="removepoint();" value="删除公交站点" />
				
			</form>
			<form>
				popup的经度：<input id="popuplon" type="text" />
				<br />
				popup的维度：<input id="popuplat" type="text" />
				<br />
				<input id="Button8" type="button" onclick="showpopup();" value="显示popup" />    
				<br />
				<input id="Button72" type="button" onclick="removemarkers();" value="删除所有公交站点/路线/提示框" />
			</form>    
			<div id="navtoolbar" class="olControlNavToolbar"></div>
		</td>
	</tr>
</table>
</body>
</html>